import { Button, Divider } from 'antd'
import React from 'react'
import { AgGridReact } from "ag-grid-react";
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';


import styles from './index.scss'
import "./index.scss"
import { Link } from 'dva/router';

export default p=>{
  const state = {
        columnDefs: [
          {
            headerName: "Athlete",
            field: "athlete",
            width: 150,
            tooltipField: "athlete",
            tooltipComponentParams: { color: "#ececec" }
          },
          {
            headerName: "Age",
            field: "age",
            width: 90
          },
          {
            headerName: "Country",
            field: "country",
            width: 120,
            tooltipField: "country"
          },
          {
            headerName: "Year",
            field: "year",
            width: 90
          },
          {
            headerName: "Date",
            field: "date",
            width: 110
          },
          {
            headerName: "Sport",
            field: "sport",
            width: 110
          },
          {
            headerName: "Gold",
            field: "gold",
            width: 100
          },
          {
            headerName: "Silver",
            field: "silver",
            width: 100
          },
          {
            headerName: "Bronze",
            field: "bronze",
            width: 100
          },
          {
            headerName: "Total",
            field: "total",
            width: 100
          }
        ],
        defaultColDef: {
          sortable: true,
          tooltipComponent: "customTooltip"
        },
        rowData: [
            {id:1,age:1,country:'CN'},
            {id:2,age:1,country:'CN'},
            {id:12,age:1,country:'CN'},
            {id:133,age:1,country:'CN'}
        ],
      };


    return <div>
        <div className={styles.smain}>hello    js
            <div className={styles.sbtn}>btssssn</div>
        </div>
        <Button>Antd Btn</Button>
        <div className="smain">
            xxxx
            <div className='sbtn'>btnssss</div>
        </div> 
        <div>

        <div
          id="myGrid"
          style={{
            height: "100%",
            width: "100%"
          }}
          className="ag-theme-balham"
        >
          <AgGridReact
            columnDefs={state.columnDefs}
            defaultColDef={state.defaultColDef}
            rowData={state.rowData}
            frameworkComponents={state.frameworkComponents}
            // onGridReady={this.onGridReady}
          />
        </div>
        <Link to="/Demo">TO Demo</Link>
        </div>
    </div>
}